<template>
  <div class="contacts-view">
    <!-- 页面头部 -->
    <ViewHeader title="联系人" subtitle="管理您的好友和群组" />

    <div class="contacts-content">
      <!-- 搜索栏 -->
      <SearchBox
        v-model="contactStore.searchQuery"
        placeholder="搜索联系人..."
        @search="handleSearch"
        @add-contact="handleAddContact"
      />

      <!-- 联系人分类 -->
      <ContactCategories
        v-model="contactStore.activeCategory"
        :categories="contactStore.contactCategories"
        @change="handleCategoryChange"
      />

      <!-- 联系人列表 -->
      <ContactList
        @select-contact="handleSelectContact"
        @send-message="handleSendMessage"
        @view-contact="handleViewContact"
        @call="handleCall"
        @video-call="handleVideoCall"
        @more-actions="handleMoreActions"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { useContactStore } from '@/store/contact'
import { useChatStore } from '@/store/chat'
import { useUIStore } from '@/store/ui'
import ViewHeader from './ViewHeader.vue'
import SearchBox from './SearchBox.vue'
import ContactCategories from './ContactCategories.vue'
import ContactList from './ContactList.vue'
import type { Contact } from './types'

// 使用 Pinia stores
const contactStore = useContactStore()
const chatStore = useChatStore()
const uiStore = useUIStore()

// 组件挂载时初始化数据
onMounted(() => {
  // 初始化联系人数据
  contactStore.initMockData()
})

// 事件处理函数
const handleSearch = async (query: string): Promise<void> => {
  await contactStore.searchContacts(query)
}

const handleAddContact = (): void => {
  console.log('添加好友')
  // 这里可以打开添加好友对话框
  // 示例：添加新好友
  // contactStore.addFriend({
  //   name: '新朋友',
  //   avatar: '',
  //   status: 'online',
  //   lastMessage: ''
  // })
}

const handleCategoryChange = (category: string): void => {
  contactStore.setActiveCategory(category)
}

const handleSelectContact = (contact: Contact): void => {
  contactStore.selectContact(contact.id)
  console.log('选择联系人:', contact)
}

const handleSendMessage = (contact: Contact): void => {
  console.log('发送消息给:', contact.name)

  // 创建或激活会话
  const existingSession = chatStore.sessions.find((s) => s.id === contact.id)
  if (existingSession) {
    chatStore.setActiveSession(contact.id)
  } else {
    chatStore.createSession(contact.id)
  }

  // 切换到聊天视图
  uiStore.setActiveToolbarItem('chat')
}

const handleViewContact = (contact: Contact): void => {
  console.log('查看联系人详情:', contact.name)
  // 这里可以打开联系人详情页面或弹窗
}

const handleCall = (contact: Contact): void => {
  console.log('开始语音通话:', contact.name)
  // 这里可以发起语音通话
}

const handleVideoCall = (contact: Contact): void => {
  console.log('开始视频通话:', contact.name)
  // 这里可以发起视频通话
}

const handleMoreActions = (contact: Contact): void => {
  console.log('显示更多操作:', contact.name)
  // 这里可以显示上下文菜单
}
</script>

<style scoped>
.contacts-view {
  height: 100%;
  padding: 24px;
  background-color: var(--background-color-primary);
  overflow-y: auto;
}

.contacts-content {
  display: flex;
  flex-direction: column;
  gap: 0; /* 子组件自己管理间距 */
}

/* 响应式设计 */
@media (max-width: 768px) {
  .contacts-view {
    padding: 16px;
  }
}

@media (max-width: 480px) {
  .contacts-view {
    padding: 12px;
  }
}
</style>
